<template>
	<view>
		<u-empty image="search" description="您还未发布职位，暂时无法为您推荐简历" style="background-color:#fff"
			v-if="published_joblist.length === 0" />
		<view class="inv-top-menu-bar">
			<view class="top-menu">
				<view class="	top-menu-list">
					<a class="t-btn " :class="item.id == currentJobItem.id ? 'active' : ''"
						v-for="(item, index) in published_joblist" :key="index" @click="onJobSelected(item)">
						{{ item.jobname }}
					</a>
					<view class="clear"></view>
				</view>
			</view>
			<view class="handle_wrapper">
				<view class="choose" @click="showChoose"></view>
				<view class="search" @click="handleClick('/views/ResumeList','')"></view>
			</view>
		</view>
		<view class="form_split_10" v-if="published_joblist.length > 0"></view>
		<u-empty image="search" description="没有找到对应的数据" style="background-color:#fff" v-if="show_empty === true" />
		<view>
			<view class="box_1">
				<view v-for="(item, index) in resumelist" :key="index"
					@click="handleClick('/commonViews/ResumeShow?id=',item)">
					<view class="list">
						<view class="up">
							<view class="avatar_box">
								<image :src="item.photo_img_src" :alt="item.fullname"></image>
								<view class="gender" :class="item.sex==1?'male':'female'"></view>
							</view>
							<view class="tx1">
								<view class="name">{{ item.fullname }}</view>
								<view class="level_ico" v-if="item.high_quality == 1"></view>
								<view class="clear"></view>
								<view class="wage">{{ item.intention_wage }}</view>
							</view>
							<view class="tx2">
								{{ item.age_text }}岁 · {{ item.experience_text }}经验 ·
								{{ item.education_text }}
								<view class="time">{{ item.refreshtime }}</view>
							</view>
						</view>
						<view class="tx3">
							想找
							<text>{{ item.intention_jobs }}</text>
							工作
						</view>
						<view class="tx3">
							想在
							<text>{{ item.intention_district }}</text>
							工作
						</view>
						<view class="tx4">{{ item.current_text }}</view>
						<view class="tag" v-if="item.service_tag != ''">
							{{ item.service_tag }}
						</view>
					</view>
					<view class="form_split_10"></view>
				</view>
			</view>
			<u-loadmore class="u-loadmore" v-if="resumelist.length >= pagesize" :status="finished_status" />
		</view>
		<!-- <u-modal v-model="show" :content="content"></u-modal> -->
		<u-modal v-model="showDetail" title="选择职位" show-cancel-button @confirm="confirmSel">
			<view class="box_2">
				<scroll-view @touchmove.stop.prevent="() => {}" scroll-y="true" style="height: 280rpx;">
					<u-radio-group v-model="selJobItemId">
						<view class="list" v-for="(item, index) in published_joblist" :key="index"
							@click="selJobItemId = item.id">
							{{ item.jobname }}
							<u-radio class="jobDeatilRadio" :name="item.id" icon-size="20rpx"></u-radio>
						</view>
					</u-radio-group>
				</scroll-view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'Recommend',
		data() {
			return {
				finished_status: '',
				show_empty: false,
				showDetail: false,
				published_joblist: [],
				resumelist: [],
				currentJobItem: null,
				selJobItemId: '',
				page: 1,
				pagesize: 10
			}
		},
		watch: {
			$Route(to, from) {
				// 对路由变化作出响应...
				if (from.name != 'resumeShow' && to.name == 'CompanyRecommend') {
					this.fetchDataRecommend(true)
				}
			}
		},
		beforeRouteLeave(to, from, next) {
			if (to.name == 'resumeShow') {
				if (!from.meta.keepAlive) {
					from.meta.keepAlive = true
				}
				next()
			} else {
				from.meta.keepAlive = false
				next()
			}
		},
		created() {
			this.fetchDataPublishedJoblist()
		},
		onReachBottom() {
			this.page++
			this.fetchDataRecommend(false)
		},
		methods: {
			handleClick(path, item) {
				if (item == '') {
					uni.navigateTo({
						url: path
					})
				} else {
					uni.navigateTo({
						url: path + item.id
					})
				}
			},
			confirmSel() {
				for (const key in this.published_joblist) {
					if (this.published_joblist[key].id == this.selJobItemId) {
						this.currentJobItem = this.published_joblist[key]
						break
					}
				}
				this.fetchDataRecommend(true)
			},
			fetchDataPublishedJoblist() {
				http
					.get(api.get_publish_jobs, {})
					.then(res => {
						this.published_joblist = [...res.data.data.items]
						if (this.published_joblist.length > 0) {
							this.currentJobItem = {
								...this.published_joblist[0]
							}
							this.selJobItemId = this.currentJobItem.id
							this.fetchDataRecommend(true)
						}
					})
					.catch(() => {})
			},
			fetchDataRecommend(init) {
				if (this.currentJobItem === null) {
					this.show_empty = true
					this.finished_status = 'nomore'
					return false
				}
				this.show_empty = false
				if (init === true) {
					this.page = 1
				} else {
					this.finished_status = 'loading'
				}
				let params = {
					id: this.currentJobItem.id,
					page: this.page,
					pagesize: this.pagesize
				}
				http
					.get(api.recommend_resumelist, params)
					.then(res => {
						if (init === true) {
							this.resumelist = [...res.data.data.items]
						} else {
							this.resumelist = this.resumelist.concat(res.data.data.items)
						}
						// 数据全部加载完成
						if (res.data.data.items.length < this.pagesize) {
							this.finished_status = 'nomore'
							if (init === false) {
								this.finished_status = 'nomore'
							} else if (res.data.data.items.length == 0) {
								this.show_empty = true
							}
						}
					})
					.catch(() => {})
			},
			onJobSelected(item) {
				this.currentJobItem = item
				this.selJobItemId = this.currentJobItem.id
				this.fetchDataRecommend(true)
			},
			showChoose() {
				this.showDetail = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_2 {
		.list {
			/deep/ .jobDeatilRadio {
				position: absolute;
				right: 0;
				top: 22rpx;
			}

			position: relative;
			font-size: 30rpx;
			color: #333333;
			padding: 14rpx 70rpx 14rpx 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		background: #ffffff;
		overflow-x: hidden;
		overflow-y: auto;
		font-size: 26rpx;
		padding: 20rpx 40rpx;
		max-height: 420rpx;
	}

	.box_1 {
		.list {
			.tag {
				padding: 6rpx 10rpx 6rpx 34rpx;
				border-radius: 6rpx;
				color: #ffffff;
				font-size: 20rpx;
				position: absolute;
				right: 34rpx;
				bottom: 36rpx;
				background-image: url($ImgUrl + "fab_ico.svg");
				background-color: #ffa57d;
				background-position: 10rpx center;
				background-repeat: no-repeat;
				background-size: 20rpx;
			}

			.top {
				position: absolute;
				right: -50rpx;
				top: -50rpx;
				width: 100rpx;
				height: 100rpx;
				background-color: #feae41;
				color: #ffffff;
				font-weight: bold;
				text-align: center;
				transform: rotateZ(45deg);
				padding-top: 72rpx;
				font-size: 20rpx;
			}

			.tx4 {
				font-size: 26rpx;
				color: #999999;
				padding-right: 180rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-bottom: 30rpx;
			}

			.tx3 {
				text {
					color: #666666;
				}

				font-size: 26rpx;
				color: #999999;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-bottom: 20rpx;
			}

			.up {
				.tx2 {
					.time {
						position: absolute;
						right: 0;
						top: 14rpx;
						font-size: 26rpx;
						color: #999999;
					}

					position: relative;
					font-size: 30rpx;
					color: #666666;
					padding: 12rpx 0 26rpx;
				}

				.tx1 {
					.wage {
						position: absolute;
						right: 0;
						top: 48rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #ff5d24;
					}

					.level_ico {
						float: left;
						margin-left: 20rpx;
						width: 72rpx;
						height: 50rpx;
						background-image: url($ImgUrl + "resume_list_level_ico.png");
						background-position: 0 8rpx;
						background-repeat: no-repeat;
						background-size: 72rpx 30rpx;
					}

					.name {
						float: left;
						font-size: 36rpx;
						font-weight: bold;
						color: #333333;
					}

					position: relative;
					padding-top: 42rpx;
				}

				.avatar_box {
					.gender {
						&.female {
							background-image: $female_ico;
							background-color: #ff8d65;
							background-position: center;
							background-repeat: no-repeat;
							background-size: 18rpx;
						}

						&.male {
							background-image: $male_ico;
							background-color: #4fa5fa;
							background-position: center;
							background-repeat: no-repeat;
							background-size: 18rpx;
						}

						position: absolute;
						right: 0;
						bottom: 4rpx;
						width: 26rpx;
						height: 26rpx;
						border-radius: 100%;
					}

					image {
						width: 98rpx;
						height: 98rpx;
						border: 0;
						border-radius: 100%;
					}

					position: absolute;
					left: 0;
					top: 40rpx;
					width: 98rpx;
					height: 98rpx;
				}

				position: relative;
				padding-left: 122rpx;
			}

			position: relative;
			width: 100%;
			background-color: #ffffff;
			padding: 0 34rpx;
			overflow: hidden;
		}

		width: 100%;
	}

	.inv-top-menu-bar {
		background: #ffffff;
		position: relative;

		.handle_wrapper {
			.search {
				width: 70rpx;
				height: 100%;
				position: relative;
				display: inline-block;
				background-image: $search_ico_blue;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 28rpx;

				&::after {
					content: " ";
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(0, -50%);
					width: 2rpx;
					height: 30rpx;
					background-color: #f3f3f3;
				}
			}

			.choose {
				width: 70rpx;
				height: 100%;
				position: relative;
				display: inline-block;
				background-image: url($ImgUrl + "choose_ico_blue.png");
				background-position: center;
				background-repeat: no-repeat;
				background-size: 30rpx;
			}

			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			background-color: #ffffff;
			z-index: 3;
			box-shadow: -2rpx 0 40rpx rgba(255, 255, 255, 0.7);
		}

		.top-menu {
			width: 620rpx;
			overflow: hidden;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.top-menu-list {
			white-space: nowrap;

			.t-btn {
				position: relative;
				white-space: nowrap;
				display: inline-block;
				text-align: center;
				color: #666666;
				font-size: 30rpx;
				text-decoration: none;
				padding: 24rpx 33rpx;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);

				&::after {
					position: absolute;
					left: 50%;
					bottom: 0;
					width: 32rpx;
					height: 6rpx;
					background-color: #1787fb;
					border-radius: 100%;
					transform: translate(-50%, 0);
				}

				&.active {
					color: #1787fb;
				}

				&:last-child {
					margin-right: 120rpx;
				}
			}
		}
	}
</style>
